import React, { useState, useEffect } from "react";
import { Dropdown, Menu } from "antd";
import { SmileOutlined } from "@ant-design/icons";
import MDEditor from "@uiw/react-md-editor";
import { fetchEmojis } from "../api/SeedApi";

function EmojiSelector({ onEmojiSelect }) {
  const [emojis, setEmojis] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const loadEmojis = async () => {
      try {
        const response = await fetchEmojis();
        setEmojis(response.data);
      } catch (error) {
        console.error("获取表情失败:", error);
      } finally {
        setLoading(false);
      }
    };

    loadEmojis();
  }, []);

  const handleEmojiClick = (url) => {
    onEmojiSelect(`![](${url})`);
  };

  const menu = (
    <Menu style={{ width: 1200, padding: 8 }}>
      {loading ? (
        <Menu.Item disabled>加载中...</Menu.Item>
      ) : emojis.length === 0 ? (
        <Menu.Item disabled>暂无表情</Menu.Item>
      ) : (
        // 将表情按每行 10 个进行分组
        emojis.reduce((rows, emoji, index) => {
          if (index % 25 === 0) {
            rows.push([]);
          }
          rows[rows.length - 1].push(emoji);
          return rows;
        }, []).map((row, rowIndex) => (
          <div key={rowIndex} style={{ display: 'flex', flexWrap: 'wrap', marginBottom: 8 }}>
            {row.map((emoji, index) => (
              <div
                key={index}
                onClick={() => handleEmojiClick(emoji.url)}
                style={{ 
                  padding: 2, 
                  cursor: 'pointer',
                  borderRadius: 4,
                  margin: 2,
                  flex: '0 0 calc(3.5% + 1.5px)' // 每行 10 个表情
                }}
                onMouseEnter={(e) => e.currentTarget.style.backgroundColor = '#f0f0f0'}
                onMouseLeave={(e) => e.currentTarget.style.backgroundColor = 'transparent'}
              >
                <MDEditor.Markdown
                  source={`![](http://47.93.133.173:9000/bt7274/smilies/${emoji.url})`}
                  style={{
                    display: "block",
                    padding: 0,
                    background: "transparent",
                    border: "none",
                    textAlign: 'center'
                  }}
                />
              </div>
            ))}
          </div>
        ))
      )}
    </Menu>
  );

//   const menu = (
//     <Menu>
//       {loading ? (
//         <Menu.Item disabled>加载中...</Menu.Item>
//       ) : emojis.length === 0 ? (
//         <Menu.Item disabled>暂无表情</Menu.Item>
//       ) : (
//         emojis.map((emoji, index) => (
//           <Menu.Item key={index} onClick={() => handleEmojiClick(emoji.url)}>
//             <MDEditor.Markdown
//               source={`![](http://127.0.0.1:9000/bt7274/smilies/${emoji.url})`}
//               style={{
//                 display: "inline",
//                 padding: 0,
//                 background: "transparent",
//                 border: "none",
//               }}
//             />
//           </Menu.Item>
//         ))
//       )}
//     </Menu>
//   );

  return (
    <Dropdown overlay={menu} trigger={["click"]}>
      <a onClick={(e) => e.preventDefault()}>
        <SmileOutlined style={{ fontSize: 20, marginRight: 8 }} />
      </a>
    </Dropdown>
  );
}

export default EmojiSelector;